<template>
    <div class="comments">
        <div class="commentItem">
            <div class="user">
                <img :src="$axios.defaults.baseURL+postItem.account.defaultAvatar" alt="">
                <span>{{postItem.account.nickname}}</span>
                <span>{{date}}</span>
                <span>{{postItem.id}}</span>
            </div>
            <div class="commentSon">
                <comment-parent 
                    v-if="postItem.parent" 
                    :postParent="postItem.parent"
                    @handleParent="handleReply"
                    @dian="dianzan"
                    :date="test.date(postItem.created_at)"
                />
            </div>
            <div class="content contentOne" @mouseenter="isShow = true" @mouseleave="isShow = false">
                <div class="top">{{postItem.content}}</div>
                <div v-if="postItem.pics[0]">
                    <img  v-for="(item,index) in postItem.pics" :key="index" :src="$axios.defaults.baseURL+item.url" alt="">
                </div>
                <div class="reply">
                    <span class="iconfont iconding icon" @click="handleDian"></span>
                    <span v-show="isShow" @click="handleClick">回复</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['postItem','date'],
    data() {
        return {
            isShow:false,
        }
    },
    methods:{
        handleClick() {
            const data = {author:this.postItem.account.nickname,follow:this.postItem.id}
            this.$emit('handleReplys',data)
        },
        handleReply(data) {
            this.$emit("handleReplys",data)
        },
        handleDian() {
            this.$emit('dianzan')
        },
        dianzan() {
            this.$emit('dianzan')
        }   
    }
}
</script>
<style lang="less">
.comments {
    width:100%;
    .commentSon{
        margin:10px 20px 10px 46px;
        background-color: #f4f4f4;
        .commentItem {
            border: 1px solid #ccc;
        }
    }
    .commentItem {
        padding: 2px;
        .user {
            height: 30px;
            line-height: 30px;
            padding:0 10px 0 20px;
            font-size: 12px;
            img {
                width: 16px;
                height: 16px;
                vertical-align: middle;
            }
            span {
                &:nth-child(2) {
                    color: #666666;
                }
                &:nth-child(3) {
                    color: #999999;
                }
                &:nth-child(4) {
                    float: right;
                }
            }
        }
        .content {
            padding:0 10px 0 30px;
            .top {
                height: 40px;
            }
            img {
                width: 80px;
                height: 80px;
                object-fit:cover;
            }
            .reply {
                position: relative;
                height: 20px;
                text-align: right;
                margin-bottom: 10px;
                span {
                    font-size: 12px;
                    cursor:pointer;
                }
                .icon {
                    &::before {
                        position:absolute;
                        right:35px;
                        top: 0;
                        font-size: 16px;
                        
                    }
                }
                
            }
        }
        .contentOne {
            padding-left: 54px;
        }
    }
}
</style>